Using AI to create a UX Component

Description

Create a UX component using AI with data binding. Choose a datasource, provide a prompt informed by schema, then save and preview the generated component.

Start The UX Generator

From the Web Project Control Panel AI menu, choose the option to create a UX component.

AI Menu For UX

Pick Generation Mode

Select from the available options; for this example, generate against an existing datasource.

UX AI Options

Bind To A Datasource

1. Choose Datasource

   The binding dialog opens so you can select a datasource.

   

   Binding Dialog

2. Select Tables

   Pick the table(s) you want to bind.

   

   Select Tables

3. Proceed

   With the table binding established, continue to the next step.

   

   Binding Confirmed

Provide The Prompt

The prompt works like a web page prompt but includes schema context and instructions on which fields to include.

Prompt With Schema

Customer UX Prompt

Review The Result

The generated UX contains a template with placeholders wired to fields.

Generated UX Template

Save To Project

1. Save the generated UX component to your project.

   

   Saved Component

2. Load And Inspect

   Open the component to confirm fields were created and view the Freeform control.

   

   Component Loaded
   

   Freeform Control

3. Preview

   Preview the UX to confirm bindings and layout.

   

   UX Preview